<template>
    <div>
        <users :title="'登录'"></users>
          <yd-cell-group>
        <yd-cell-item>
            <yd-input slot="right" ref="phone" required v-model="input1" regex="mobile" placeholder="手机号"></yd-input>
        </yd-cell-item>
        <yd-cell-item>
            <yd-input slot="right" ref="pwd" type="password" v-model="input2" max="20" min="6" placeholder="密码"></yd-input>
        </yd-cell-item>
        </yd-cell-group>
         <yd-button-group>
       <yd-button size="large" type="primary" bgcolor="#f37d0f" color="#fff" shape="circle" @click.native="clickname">登录</yd-button>
        </yd-button-group>
        <div class="user">
          <a href="#/regisrer">没有账号？注册</a>
        </div>
        
    </div>
</template>
<script>
import users from '../pulic/user-header.vue'
export default {
   data() {
     return {
       input1:'',
       input2:"",
     }
   },
    components:{
      users
    },
    methods: {
      clickname(){
        if(this.$refs.phone.valid && this.$refs.pwd.valid){
               if(this.input1=="15209847041" && this.input2=="123456"){
                 this.$dialog.toast({
                   mes:"登录成功",
                   timeout:1500,
                   icon: 'success',
                   callback:()=>{
                       this.$router.push({name:"HelloWorld"})
                   }
               })
               }else{
                 this.$dialog.toast({
                   mes:"登录失败",
                   timeout:1500
               })
               }
        }else{
          this.$dialog.toast({
                   mes:"登录失败",
                   timeout:1500
               })
        }
      }
    },
}
</script>
<style scoped>
.login-header{
    height: 4.3rem;
    background:url("https://m.mi.com/static/img/bg.63c8e19851.png") center 0 #f37d0f;
     display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .user{
    position: fixed;
    bottom:20px;
    left:0px;
    text-align: center;
    width: 100%;
    color: #ccc;
  }
</style>


